<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 

    标签分类
  
    1. 按类型
      1.1 block：块
          例如div、p、ul、li、h1等都属于块，它们具有以下特性：
            a) 独占一行
            b) 支持CSS所有样式
            c) 不设置宽时，宽会和父元素的宽相同
            d) 所占区域是一个矩形
      1.2 inline：内联（行内标签）
          例如span、a、em、strong等都属于内联，它们具有以下特性：
            a) 挨在一起（和其他元素在一行上）
            b) 对元素的高度、宽度及顶部和底部边距设置不生效；完全靠内容撑开宽高
            c) 所占区域不一定是矩形
            d) 内联标签之间会有空隙，是由写代码时换行产生的，但一般不需要解决这个空隙。

  注意： 布局一般用块标签，修饰文本一般用内联标签。

      1.3 inline-block：内联块（行内块标签）
          例如img、input、select等（一般是表单标签），特性如下：
            a) 挨在一起
            b) 元素的高度、宽度、行高以及顶和底边距都可设置


    2. 按显示
      2.1 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
          img, input, textarea, select, object
      
      2.2 非替换元素：将内容直接告诉浏览器，将其显示出来
            p span 

    3. 按内容分类：
      见图：按内容分类.png

    4. 显示框类型
        4.1 display属性规定元素应该生成的框的类型
            display: block / inline / inline-block / none

            a) inline：默认值，此元素会被显示为内联元素，元素前后没有换行符。
            b) block：此元素将显示为块级元素，此元素前后会带有换行符。
            c) inline-block：行内块元素
            d) none：此元素不会被显示

       4.2 display: none 和visibility：hidden的区别
            display: none 表示不占空间的隐藏
            visibility: hidden 占空间的隐藏

      注意：
        在html文档中，不建议使用显示框类型，通常使用浮动 float 来实现相同的效果。


   -->

</head>

<style>
  /* 1.1 block：块 */
  /* .div1{
    width: 200px;
    height: 200px;
    border: 2px red solid;
  }
  .div2{
    background-color: green;
    height: 100px;
  } */

  /* 1.2 inline：内联（行内标签） */
  /* div{
    width: 100px;
    height: 100px;
    border: 1px black solid;
  }
  span{
    background-color:red ;
    width: 80px;
    height: 80px;
  } */

  /* 1.3 inline-block：内联块（行内块标签） */
  /* img{
    width: 200px;
    height: 150px;
  }
  input{
    width: 200px;
  } */
  
  /* 4. 显示框类型 */
  /* 4.1 display:inline */
  /* #div1,#div2{
    display: inline;
    width: 100px;
    height: 100px;
    background-color: red;
  } */
  /* 4.2 display: none 和visibility：hidden的区别  */
  /* #div1{
    display: none;
    width: 100px;
    height: 100px;
    background-color: red;
  } */
  /* #div1{
    visibility: hidden;
    width: 100px;
    height: 100px;
    background-color: red;
  } */
  


</style>


<body>

  <!-- 1.1 block：块 -->
  <!-- <div class="div1">
    <div class="div2"></div>
  </div>
  <div class="div1"></div> -->

  <!-- 1.2 inline：内联（行内标签） -->
  <!-- <div>
    <span>aaa</span>
    <a href="#">bbb</a>
  </div> -->

  <!-- 1.3 inline-block：内联块（行内块标签） -->
  <!-- <img src="./按内容分类.png" alt="aaa">
  <input type="text"> -->

  <!-- 2按显示分类 -->
  <!-- 2.1 替换元素 -->
  <!-- <img src="#" alt="">
  <img src="./按内容分类.png" alt=""> -->
  <!-- 2.2  非替换元素-->
  <!-- <p>2222222222</p> -->

  <!-- 4 .显示框类型-->
  <!-- 4.1 display:inline
   4.2 display: none 和visibility：hidden的区别 
  -->
  <div id="div1">111111</div>
  <div id="div2">22222222</div>
  
  
</body>
</html>